<!-- 分配接口 -->

<style lang="scss" scoped>
.el-scrollbar {
  margin-bottom: 30px;
  height: calc(100vh - 160px);

  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>

<template>
  <SydDialog
    append-to-body
    :size="DIALOG_SIZE.FULLSCREEN"
    :visible.sync="showDialog"
    @close="$emit('update:visible', false)"
  >
    <el-scrollbar>
      <el-table
        :data="list"
        row-key="api_id"
        border
        default-expand-all
        :tree-props="{children: 'children'}"
      >
        <el-table-column prop="api_title" label="接口名称" />
        <el-table-column prop="api_method" label="接口" />
        <el-table-column label="接口价格">
          <template slot-scope="{ row }">
            <el-input v-if="row.interface === 1" v-model="row.price" />
          </template>
        </el-table-column>

        <el-table-column label="结算基数（数量）">
          <template slot-scope="{ row }">
            <el-input v-if="row.interface === 1" v-model="row.counting_unit" />
          </template>
        </el-table-column>

        <el-table-column label="剩余数量">
          <template slot-scope="{ row }">
            <el-input v-if="row.interface === 1" v-model="row.surplus_num" />
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <template #footer>
      <div />
      <div>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </template>

  </SydDialog>
</template>

<script>

import _ from 'lodash'
import { appApi, setPrice } from '@/api/member/app'

import SydDialog from '@/components/SydDialog/index.vue'

export default {

  name: 'DistributeInterface',

  components: {
    SydDialog
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },

    data: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      showDialog: this.visible,

      list: [],
      flatList: [],

      DIALOG_SIZE: SydDialog.DIALOG_SIZE
    }
  },

  watch: {
    visible(val) {
      this.showDialog = this.visible

      if (val) {
        appApi({
          appkey: this.data.app_key,
          uid: this.data.uid
        }).then(res => {
          this.list = this.setDefaultValue(res.data.data)
          console.log('this.list', this.list)
        })
      } else {
        this.list = []
      }
    }
  },

  methods: {

    submit() {
      this.flatList = []
      this.doFlatList(this.list)

      setPrice({
        appkey: this.data.app_key,
        uid: this.data.uid,
        api_price: this.flatList
      }).then(() => {
        this.$message.success('设置成功')
        this.showDialog = false
      })
    },

    setDefaultValue(list) {
      const temp = []
      _.forEach(list, item => {
        // 有子级
        if (_.isArray(item.children) && item.children.length !== 0) {
          item.children = this.setDefaultValue(item.children)
        } else {
          // 如果有 usePrice 则用 usePrice 下的值
          if (item.usePrice) {
            item.price = item.usePrice.price || '0'
            item.counting_unit = item.usePrice.counting_unit || '0'
            item.surplus_num = item.usePrice.surplus_num || '0'
          }
        }

        // 循环检查是否有空值 如果有就设置默认值 0
        _.forEach(['price', 'counting_unit', 'surplus_num'], usePriceKey => {
          if (item.usePrice) {
            if (!item.usePrice[usePriceKey] || item.usePrice[usePriceKey] === '') {
              item.usePrice[usePriceKey] = '0'
            }
          } else {
            if (!item[usePriceKey] || item[usePriceKey] === '') {
              item[usePriceKey] = '0'
            }
          }
        })

        temp.push(item)
      })

      return temp
    },

    /**
     * 扁平化
     */
    doFlatList(list) {
      _.forEach(list, item => {
        if (_.isArray(item.children) && item.children.length !== 0) {
          this.doFlatList(item.children)
        } else {
          if (item.interface !== 1) return true
          this.flatList.push({
            api_id: item.api_id,
            price: item.price || '0',
            counting_unit: item.counting_unit || '0',
            surplus_num: item.surplus_num || '0'
          })
        }
      })
    }

  }
}
</script>
